<template>
  <!-- 编辑收货地址 -->
  <view>
    <view class="head_bg"> </view>
    <d-navBar title="我的收货地址" isSeat isPerch></d-navBar>
    <view class="pd20">
      <view class="df jcsb box aic">
        <text class="fwb">收件人姓名</text>
        <view class="ce df aic">
          <input
            type="text"
            placeholder="请输入姓名"
            v-model="addressInfo.userName"
          />
          <!-- <img class="icon-back" src="/pages/my/static/myImg/fhyh.png" alt=""> -->
        </view>
      </view>
      <view class="df jcsb box aic">
        <text class="fwb">联系电话</text>
        <view class="ce df aic">
          <input
            type="number"
            placeholder="请输入电话号码"
            v-model="addressInfo.phone"
          />
          <!-- <img class="icon-back" src="/pages/my/static/myImg/fhyh.png" alt=""> -->
        </view>
      </view>
      <view class="df jcsb box aic">
        <text class="fwb">所在地区</text>
        <view class="ce df aic" @click="showArea = true">
          <view class="">{{ returnAddress }}</view>
          <img class="icon-back" src="/static/common/go.png" alt="" />
        </view>
      </view>
      <view class="df jcsb box aic">
        <text class="fwb">详细地址</text>
        <view class="ce df aic">
          <input
            type="text"
            placeholder="请输入详细地址"
            v-model="addressInfo.address"
          />
          <!-- <img class="icon-back" src="/pages/my/static/myImg/fhyh.png" alt=""> -->
        </view>
      </view>
      <view class="df jcsb box aic">
        <text class="fwb">设为默认地址</text>
        <view class="ce df aic">
          <u-switch v-model="show" size="20" activeColor="#2AD03D"></u-switch>
        </view>
      </view>
      <!-- <view class="df btnBox">
				<button class="setAddress" @click="defaultBtn">设为默认地址</button>
				<button class="save" @click="saveBtn">保存</button>
			</view> -->
    </view>

    <view class="bottom_btn">
      <view
        class="btn"
        @click="saveBtn"
        style="background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%)"
        >保存
      </view>
    </view>
    <!-- 地区选择器 -->
    <u-picker
      :show="showArea"
      ref="uPicker"
      keyName="name"
      :columns="areaList"
      @change="changeHandler"
      @cancel="showArea = false"
      @confirm="regionGet"
      confirmColor="#2AD03D"
    ></u-picker>
  </view>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      showArea: false,
      addressInfo: {
        defaultValue: 0, //是否默认
        userName: "", //收货人
        phone: "", //联系方式
        province: "", //省
        city: "", //市
        area: "", //区
        address: "", //详细地址
      },
      params: {
        province: true,
        city: true,
        area: true,
      },
      returnAddress: "请选择地区",
      Id: "",
      page: 10,
      showpage: 1,
      title: "新增",
      areaList: [],
      checked: false,
    };
  },
  onLoad: function (option) {
    this.Id = option.id;
    if (option.id != "undefined") {
      uni.setNavigationBarTitle({
        title: "编辑地址",
      });
      this.getAddreesData();
    }
    this.selectAddress();
  },
  methods: {
    selectAddress() {
      //地区
      this.$api
        .cityGetByPid({
          pid: 0,
        })
        .then((res) => {
          this.areaList.push(res.data);
          let obj = {
            value: [
              {
                id: 1,
              },
            ],
          };
          this.getCity(obj);
        });
    },
    getCity(e) {
      this.$api
        .cityGetByPid({
          pid: e.value[0].id,
        })
        .then((res) => {
          this.columnData = res.data;
          const {
            columnIndex,
            value,
            values, // values为当前变化列的数组内容
            index,
            // 微信小程序无法将picker实例传出来，只能通过ref操作
            picker = this.$refs.uPicker,
          } = e;
          picker.setColumnValues(1, this.columnData);

          this.$api
            .cityGetByPid({
              pid: res.data[0].id,
            })
            .then((res2) => {
              // this.columnData2 = res2.data
              const {
                columnIndex,
                value,
                values, // values为当前变化列的数组内容
                index,
                // 微信小程序无法将picker实例传出来，只能通过ref操作
                picker = this.$refs.uPicker,
              } = e;
              picker.setColumnValues(2, res2.data);
            });
        });
    },

    changeHandler(e) {
      console.log("e", e);
      this.$api
        .cityGetByPid({
          pid: e.value[e.columnIndex].id,
        })
        .then((res) => {
          this.columnData = res.data;
          const {
            columnIndex,
            value,
            values, // values为当前变化列的数组内容
            index,
            // 微信小程序无法将picker实例传出来，只能通过ref操作
            picker = this.$refs.uPicker,
          } = e;
          // 当第一列值发生变化时，变化第二列(后一列)对应的选项
          if (columnIndex === 0) {
            // console.log('this.columnData[index]',this.columnData[index]);
            // picker为选择器this实例，变化第二列对应的选项
            console.log(picker, "123");
            picker.setColumnValues(1, this.columnData);
            this.$api
              .cityGetByPid({
                pid: this.columnData[0].id,
              })
              .then((res) => {
                this.columnData = res.data;
                const {
                  columnIndex,
                  value,
                  values, // values为当前变化列的数组内容
                  index,
                  // 微信小程序无法将picker实例传出来，只能通过ref操作
                  picker = this.$refs.uPicker,
                } = e;
                picker.setColumnValues(2, this.columnData);
                // picker.setColumnValues(1, this.columnData[index])
              });
          } else if (columnIndex === 1) {
            // console.log('this.columnData[index]',this.columnData[index]);
            // picker为选择器this实例，变化第二列对应的选项
            picker.setColumnValues(2, this.columnData);
            // picker.setColumnValues(1, this.columnData[index])
          }
          // console.log(this.columnData,'this.columnData')
        });
    },

    // 选择地址
    confirmArea(e) {
      console.log(e, "选择地址");
      this.showArea = false;
      this.addressArea = e.value;
    },
    // 获取地址
    async getAddreesData() {
      const { data } = await this.$api.getShippingAddressInfoY({
        id: this.Id,
      });
      console.log("详细地址data", data);
      this.addressInfo = data;
      this.show = data.defaultValue ? true : false;
      this.returnAddress = data.province + data.city + data.area;
    },
    // 获取选择的城市
    regionGet(e) {
      console.log("e", e);
      this.returnAddress = e.value[0].name + e.value[1].name + e.value[2].name;
      this.addressInfo.province = e.value[0].name;
      this.addressInfo.city = e.value[1].name;
      this.addressInfo.area = e.value[2].name;
      this.showArea = false;
      this.addressArea = e.value;
    },
    // 保存按钮
    async saveBtn() {
      if (!this.addressInfo.userName) {
        return uni.showToast({
          icon: "none",
          title: "请填写收货人",
        });
      }
      if (!this.addressInfo.phone) {
        return uni.showToast({
          icon: "none",
          title: "请填写联系方式",
        });
      }
      let phoneReg =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (!phoneReg.test(this.addressInfo.phone)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (
        !this.addressInfo.province ||
        !this.addressInfo.province ||
        !this.addressInfo.province
      ) {
        return uni.showToast({
          icon: "none",
          title: "请选择地区",
        });
      }
      if (!this.addressInfo.address) {
        return uni.showToast({
          icon: "none",
          title: "请填写详细地址",
        });
      }

      this.addressInfo.defaultValue = this.show ? 1 : 0;
			console.log('this.addressInfo-xxj :>> ', this.addressInfo);
      const { data, code } = await this.$api.editAddressY(this.addressInfo);
      if (code == 200) {
        uni.showToast({
          title: "保存成功",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.head_bg {
  width: 750rpx;
  height: 320rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.pd20 {
  padding: 0 20rpx;
  position: relative;
  z-index: 10;
}

.box {
  padding: 24rpx 10rpx;
  border-bottom: 1rpx solid #f0f1f5;
  border-radius: 10rpx;
  font-size: 28rpx;

  text {
    font-size: 28rpx;
  }

  .ce {
    margin-right: 20rpx;
    color: #909299;

    input {
      text-align: right;
    }
  }

  .fs30 {
    font-size: 30rpx;
  }

  .icon {
    width: 30rpx;
    height: 30rpx;
  }

  .icon-back {
    width: 24rpx;
    height: 24rpx;
    margin-left: 20rpx;
  }

  .headImg {
    width: 80rpx;
    height: 80rpx;
  }
}

.btnBox {
  margin-top: 200rpx;

  .setAddress {
    width: 320rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background: linear-gradient(157deg, #ffa00c 31%, #ffba4f 100%);
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }

  .save {
    width: 320rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background: #ed1010;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }
}
</style>
